<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>招财猫</title>
    <link rel="stylesheet" href="public/web/css/main.css">
    <link rel="stylesheet" href="public/web/icon/fontawesome-free-5.15.4-web/css/all.css">
    <link rel="icon" href="public/web/img/favicon.ico">
</head>

<body>
<!-- Wrapper -->
<div id="wrapper" class="has-text-centered-mobile">

    <!-- Hero -->
    <section id="hero" class="hero is-medium is-relative">
        <div class="hero-head has-text-weight-semibold">
            <nav class="navbar is-transparent">
                <div class="container">
                    <div class="navbar-brand">
                        <figure class="image is-48x48 ">
                            <img src="public/web/img/logo.png" alt="Image">
                        </figure>
                        <a class="navbar-item">
                            <h3 class="logo has-text-white is-size-4">招财猫</h3>
                        </a>
                    </div>

                    <div class="navbar-menu">
                        <div class="navbar-start">
                            <a class="navbar-item has-text-white is-flex is-justify-content-center">
                                功能
                            </a>
                            <a class="navbar-item has-text-white is-flex is-justify-content-center">
                                常见问题
                            </a>
                            <a class="navbar-item has-text-white is-flex is-justify-content-center">
                                关于我们
                            </a>
                        </div>
                        <div class="navbar-end">
                            <a class="navbar-item has-text-white is-flex is-justify-content-center" href="https://demo.smartmiao.com/frontend" target="_blank">
                                登录
                            </a>
                            <div class="navbar-item">
                                <div class="field is-grouped">
                                    <p class="control">
                                        <a class="button is-rounded">
                                            <!--                                            <span class="icon">-->
                                            <!--                                            <i class="fas fa-twitter" aria-hidden="true"></i>-->
                                            <!--                                            </span>-->
                                            <span>免费注册</span>
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="container">
                <div class="columns">
                    <div class="column">
                        <h1 class="has-text-white title is-spaced is-2">
                            招财猫，您的贴心生活助理
                        </h1>
                        <p class="has-text-white subtitle is-4">
                            多平台一站式个人和家庭记账，记账简洁、报表丰富，可以让你明明白白的知道，你的钱怎么花的，花在了哪儿！
                        </p>
                        <div class="field is-grouped">
                            <p class="control mt-5">
                                <button class="button is-rounded is-outlined is-white mr-4">
                                    <span class="icon">
                                      <i class="fas fa-play"></i>
                                    </span>
                                    <span>观看视频</span>
                                </button>
                                <a class="button is-rounded has-text-weight-semibold">
                                    <span>开始使用</span>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="column has-text-centered">
                        <figure>
                            <img src="public/web/img/hero-laptop.png" style="max-width: 100%;">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END Hero -->

    <!-- Features -->
    <section class="section section-service">
        <div class="container">
            <div class="level is-justify-content-space-around">
                <div class="level-item has-text-centered is-flex-direction-column p-6">
                    <figure class="image 128x128">
                        <img src="public/web/img/service-icon-1.png">
                    </figure>
                    <p class="heading is-size-3 has-text-weight-semibold mt-4">智能终端</p>
                    <p class="subtitle is-6">
                        多终端可用，涵盖Web网页、APP、桌面端、甚至是小程序，数据多终端同步，随时随地轻松记账
                    </p>
                </div>
                <div class="level-item has-text-centered is-flex-direction-column p-6">
                    <figure class="image 128x128">
                        <img src="public/web/img/service-icon-2.png">
                    </figure>
                    <p class="heading is-size-3 has-text-weight-semibold mt-4">简洁高效</p>
                    <p class="subtitle is-6">
                        智能AI语音识别，可以让你用简单的动作就可以轻松记录开销
                    </p>
                </div>
                <div class="level-item has-text-centered is-flex-direction-column p-6">
                    <figure class="image 128x128">
                        <img src="public/web/img/service-icon-3.png">
                    </figure>
                    <p class="heading is-size-3 has-text-weight-semibold mt-4">智能分析</p>
                    <p class="subtitle is-6">
                        占比、趋势，多种形式统计图多维度数据分析。清晰知道
                        每月消费构成、最高消费、平均消费和年度消费
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section class="section section-terminal web is-medium">
        <div class="container">
            <div class="columns is-vcentered">
                <div class="column">
                    <p class="title is-spaced">
                        强大的网页端
                    </p>
                    <p class="subtitle">
                    <div class="icon-text">
                            <span class="icon has-text-success">
                                <i class="fas fa-check"></i>
                            </span>
                        <span>记账管家：信用卡还款、各项财务收支流水账，好用的钱包管家</span>
                    </div>
                    <div class="icon-text">
                            <span class="icon has-text-success">
                                <i class="fas fa-check"></i>
                            </span>
                        <span>个性账簿：自定义多个账簿封面和名称，满足多账本多账户需求</span>
                    </div>
                    <div class="icon-text">
                            <span class="icon has-text-success">
                                <i class="fas fa-check"></i>
                            </span>
                        <span>智能统计：图表展现各类支出收入汇总统计信息，账单心里更有底</span>
                    </div>
                    </p>
                    <button class="button is-rounded is-info mt-4">
                        <span class="icon">
                          <i class="fas fa-desktop"></i>
                        </span>
                        <span>了解更多</span>
                    </button>
                </div>
                <div class="column has-text-centered">
                    <figure>
                        <img src="public/web/img/screenshot-desktop.png">
                    </figure>
                </div>
            </div>
        </div>
    </section>
    <section class="section section-terminal mobile is-medium">
        <div class="container">
            <div class="columns is-vcentered">
                <div class="column has-text-centered">
                    <figure>
                        <img src="public/web/img/screenshot-app.png">
                    </figure>
                </div>
                <div class="column">
                    <p class="title is-spaced">
                        智能手机端
                    </p>
                    <p class="subtitle">
                    <div class="icon-text">
                                <span class="icon has-text-success">
                                    <i class="fas fa-check"></i>
                                </span>
                        <span>闪电记账：3秒记一笔，生活记帐便捷迅速</span>
                    </div>
                    <div class="icon-text">
                                <span class="icon has-text-success">
                                    <i class="fas fa-check"></i>
                                </span>
                        <span>拍照记账：照片图片轻快记账，让记账更轻松方便</span>
                    </div>
                    <div class="icon-text">
                                <span class="icon has-text-success">
                                    <i class="fas fa-check"></i>
                                </span>
                        <span>日历记账：日历结合记账，方便查询时间，还可添加日记笔记计划便签备忘录</span>
                    </div>
                    </p>
                    <button class="button is-rounded is-info mt-4">
                        <span class="icon">
                          <i class="fas fa-mobile-alt"></i>
                        </span>
                        <span>了解更多</span>
                    </button>
                </div>
            </div>
        </div>
    </section>
    <section class="section section-terminal desktop is-medium">
        <div class="container">
            <div class="columns is-vcentered">
                <div class="column">
                    <p class="title is-spaced">
                        离线版桌面端
                    </p>
                    <p class="subtitle">
                    <div class="icon-text">
                                <span class="icon has-text-success">
                                    <i class="fas fa-check"></i>
                                </span>
                        <span>隐私高度保密，防泄漏，还可导出excel，实用省心</span>
                    </div>
                    </p>
                    <button class="button is-rounded is-info mt-4">
                        <span class="icon">
                          <i class="fas fa-laptop"></i>
                        </span>
                        <span>了解更多</span>
                    </button>
                </div>
                <div class="column has-text-centered">
                    <figure>
                        <img src="public/web/img/screenshot-desktop-offline.png">
                    </figure>
                </div>
            </div>
        </div>
    </section>
    <section class="section section-pricing is-medium">
        <div class="container">
            <p class="title has-text-centered is-spaced has-text-white">定价和计划</p>
            <p class="subtitle has-text-centered has-text-white">
                <span class="icon has-text-warning	">
                    <i class="fas fa-gift"></i>
                </span>
                <span>限时优惠：购买两年额外赠送3个月、购买三年额外赠送6个月</span>
            </p>
            <div class="pricing-table is-comparative">
                <div class="pricing-plan is-features">
                    <div class="plan-header">服务</div>
                    <div class="plan-price"><span class="plan-price-amount">&nbsp;</span></div>
                    <div class="plan-items">
                        <div class="plan-item">家庭成员</div>
                        <div class="plan-item">总空间</div>
                        <div class="plan-item">提供正规发票与合同</div>
                        <div class="plan-item">专属技术团队支持</div>
                    </div>
                    <div class="plan-footer">

                    </div>
                </div>
                <div class="pricing-plan">
                    <div class="plan-header">免费版</div>
                    <div class="plan-price">
                        <span class="plan-price-amount"><span class="plan-price-currency">¥</span>0</span>/年
                    </div>
                    <div class="plan-items">
                        <div class="plan-item">1人</div>
                        <div class="plan-item">5 GB</div>
                        <div class="plan-item">-</div>
                        <div class="plan-item">-</div>
                    </div>
                    <div class="plan-footer">
                        <button class="button is-fullwidth" disabled="disabled">购买</button>
                    </div>
                </div>

                <div class="pricing-plan is-warning">
                    <div class="plan-header">基础版</div>
                    <div class="plan-price">
                        <span class="plan-price-amount"><span class="plan-price-currency">¥</span>1000</span>/年（示例）
                    </div>
                    <div class="plan-items">
                        <div class="plan-item">1人</div>
                        <div class="plan-item">20 GB</div>
                        <div class="plan-item">
                            <span class="icon has-text-success">
                                <i class="fas fa-check"></i>
                            </span>
                        </div>
                        <div class="plan-item">
                            <span class="icon has-text-success">
                                <i class="fas fa-check"></i>
                            </span>
                        </div>
                    </div>
                    <div class="plan-footer">
                        <button class="button is-fullwidth">购买</button>
                    </div>
                </div>

                <div class="pricing-plan is-active">
                    <div class="plan-header">标准版</div>
                    <div class="plan-price">
                        <span class="plan-price-amount"><span class="plan-price-currency">¥</span>6000</span>/年（示例）
                    </div>
                    <div class="plan-items">
                        <div class="plan-item">6人</div>
                        <div class="plan-item">50 GB</div>
                        <div class="plan-item">
                            <span class="icon has-text-success">
                                <i class="fas fa-check"></i>
                            </span>
                        </div>
                        <div class="plan-item">
                            <span class="icon has-text-success">
                                <i class="fas fa-check"></i>
                            </span>
                        </div>
                    </div>
                    <div class="plan-footer">
                        <button class="button is-fullwidth">购买</button>
                    </div>
                </div>

                <div class="pricing-plan is-danger">
                    <div class="plan-header">尊享版</div>
                    <div class="plan-price">
                        <span class="plan-price-amount"><span class="plan-price-currency">¥</span>9999</span>/年（示例）
                    </div>
                    <div class="plan-items">
                        <div class="plan-item">不限</div>
                        <div class="plan-item">1 TB</div>
                        <div class="plan-item">
                            <span class="icon has-text-success">
                                <i class="fas fa-check"></i>
                            </span>
                        </div>
                        <div class="plan-item">
                            <span class="icon has-text-success">
                                <i class="fas fa-check"></i>
                            </span>
                        </div>
                    </div>
                    <div class="plan-footer">
                        <button class="button is-fullwidth">购买</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section section-gallery is-medium">
        <div class="container">
            <p class="title has-text-centered">应用展示</p>
            <div>
                <div id="tabs" class="tabs is-centered">
                    <ul>
                        <li>
                            <a>
                                <span class="icon is-small"><i class="fas fa-desktop" aria-hidden="true"></i></span>
                                <span>网页端</span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <span class="icon is-small"><i class="fas fa-mobile-alt" aria-hidden="true"></i></span>
                                <span>移动端</span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <span class="icon is-small"><i class="fas fa-laptop" aria-hidden="true"></i></span>
                                <span>桌面端</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- Start Carousel -->
                <div id="carousel-web" class="tab-content carousel">
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/screenshot-frontend.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/frontend-1.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/frontend-2.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/frontend-3.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/frontend-4.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/frontend-5.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/frontend-6.png">
                    </div>
                </div>
                <div id="carousel-mobile" class="tab-content  carousel">
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/app-1.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/app-2.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/app-3.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/app-4.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/app-5.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/app-6.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/app-7.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/app-8.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/app-9.png">
                    </div>
                </div>
                <div id="carousel-desktop" class="tab-content  carousel">
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/screenshot-desktop-offline.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/desktop-1.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/desktop-2.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/desktop-3.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/desktop-4.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/desktop-5.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/desktop-6.png">
                    </div>
                    <div class="item-1">
                        <!-- Slide Content -->
                        <img src="public/web/img/desktop-7.png">
                    </div>
                </div>
                <!-- End Carousel -->
            </div>
        </div>
    </section>
    <section class="section section-video is-large">
        <div class="container is-flex is-justify-content-center is-align-items-center">
            <div class="waves-block">
                <div class="waves wave-1"></div>
                <div class="waves wave-2"></div>
                <div class="waves wave-3"></div>
            </div>
            <a href="#" class="v-btn"><i class="fa fa-play"></i></a>
        </div>
    </section>
    <section class="section section-faq is-medium">
        <div class="container">
            <p class="title has-text-centered">常见问题解答</p>
            <div class="columns is-multiline">
                <div class="column is-half">
                    <article class="message ">
                        <div class="message-header">
                            <p>1.我可以把项目用于商业用途吗？</p>
                        </div>
                        <div class="message-body box">
                            可以，项目本身开源，遵守相对宽松的MIT协议，
                            你可以免费地、没有限制地处理本软件( 包括随意地使用、拷贝、合并、发布、分发、再许可、卖拷贝，以及再授权其他人 ( 那些被装配了本软件的 )，
                            你只需要<strong>保留我的版权和许可证信息</strong>即可。
                        </div>
                    </article>
                </div>
                <div class="column is-half">
                    <article class="message">
                        <div class="message-header">
                            <p>2.我可以获得什么？</p>
                        </div>
                        <div class="message-body box">
                            你可以获得项目的<strong>全套代码（包含后端、前端、桌面端、移动端）</strong>
                            一个直接可套用的<strong>产品营销网站</strong>、一套直接替换资源就可用的<strong>AE视频宣传模板</strong>、
                            一套 <strong>视频教程</strong>、
                            和全套打包后的部署文件、安装包等。
                        </div>
                    </article>
                </div>
                <div class="column is-half">
                    <article class="message ">
                        <div class="message-header">
                            <p>3.如何获得支持/如何支持我？</p>
                        </div>
                        <div class="message-body box">
                            你可以提交 <strong>Issue</strong>提交详细的问题描述，我会和社区成员互相帮助解决问题。
                            <br>
                            你可以直接提交<strong>PR</strong>贡献你的代码，也可以 <strong>捐赠</strong> 杯咖啡来支持我。
                            <br>
                            如果你有非常紧急的问题，可以尝试邮件或电话联系。
                        </div>
                    </article>
                </div>
                <div class="column is-half">
                    <article class="message">
                        <div class="message-header">
                            <p>4.有什么高级服务吗？</p>
                        </div>
                        <div class="message-body box">
                            有，<br>
                            提供 <strong>定制化</strong>服务，充分满足你的需要，
                            <br>
                            提供 <strong>有偿托管</strong>服务，帮助你搭建自己的私有项目，
                            <br>
                            提供 <strong>咨询指导</strong>服务，如果你有这方面的需要请联系我。
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </section>

    <!-- END Features -->

    <!-- Footer -->
    <footer id="footer" class="footer">
        <div class="container">
            <div class="columns">
                <div class="column is-5">
                    <div class="is-flex is-align-items-center mb-5">
                        <figure class="image is-96x96 ">
                            <img src="public/web/img/logo.png" alt="Image">
                        </figure>
                        <a class="ml-3">
                            <h3 class=" is-size-4 has-text-weight-semibold">招财猫</h3>
                        </a>
                    </div>
                    <div class="icon-text box-email">
                        <span class="icon">
                            <i class="fas fa-envelope"></i>
                        </span>
                        <span>hilanmiao@126.com</span>
                    </div>
                    <p class="box-description has-text-grey">山东省潍坊市</p>
                    <p class="buttons">
                        <a class="button is-outlined is-white" target="_blank" href="https://github.com/hilanmiao">
                            <span class="icon is-small">
                              <i class="fab fa-github"></i>
                            </span>
                        </a>
                        <a class="button is-outlined is-white" target="_blank" href="https://github.com/hilanmiao">
                            <span class="icon is-small">
                              <i class="fab fa-qq"></i>
                            </span>
                        </a>
                        <a class="button is-outlined is-white" target="_blank" href="https://github.com/hilanmiao">
                            <span class="icon is-small">
                              <i class="fab fa-facebook-f"></i>
                            </span>
                        </a>
                        <a class="button is-outlined is-white" target="_blank" href="https://github.com/hilanmiao">
                            <span class="icon is-small">
                              <i class="fab fa-linkedin-in"></i>
                            </span>
                        </a>
                    </p>
                    <p class="copyright has-text-grey">
                        © 2022 招财猫 ｜ 鲁ICP备18035920号-1
                    </p>
                </div>
                <div class="column">
                    <p class="link-title">项目</p>
                    <p class="link">
                        <a href="#">最新发布</a>
                    </p>
                    <p class="link">
                        <a href="#">项目许可</a>
                    </p>
                    <p class="link">
                        <a href="#">常见问题</a>
                    </p>
                    <p class="link">
                        <a href="#">获得帮助</a>
                    </p>
                    <p class="link">
                        <a href="#">合作伙伴</a>
                    </p>
                </div>
                <div class="column">
                    <p class="link-title">关于我们</p>
                    <p class="link">
                        <a href="#">博客</a>
                    </p>
                    <p class="link">
                        <a href="#">加入我们</a>
                    </p>
                    <p class="link">
                        <a href="#">商务合作</a>
                    </p>
                </div>
                <div class="column is-3">
                    <p class="link-title">订阅</p>
                    <p class="box-description">功能、发布、展示……随时了解情况！</p>
                    <div class="box-input">
                        <div class="field m-0">
                            <p class="control has-icons-left has-icons-right">
                                <input class="input is-static" type="email" placeholder="邮箱">
                                <span class="icon is-small is-left">
                                  <i class="fas fa-envelope"></i>
                                </span>
                            </p>
                        </div>
                        <button class="button is-outlined">
                                <span class="icon is-small">
                                  <i class="fa fa-paper-plane"></i>
                                </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <button id="backToTop" class="button is-link">
        <span class="icon is-small">
          <i class="fa fa-angle-up"></i>
        </span>
    </button>
</div>
<!-- END Wrapper -->
</body>
<script type="text/javascript" src="public/web/js/bulma-carousel.js"></script>
<script type="text/javascript" src="public/web/js/main.js"></script>
</html>
